<template>
    <el-drawer
      class="drawer-enjoy"
      ref="drawer"
      :size="width"
      :title="title"
      :show-close="false"
      :before-close="handleClose"
      :visible.sync="visible">
<!--      <el-scrollbar class="drawer-body-enjoy" name="drawer-body">-->
        <slot></slot>
<!--      </el-scrollbar>-->
      <div class="drawer-footer" size="small">
        <slot name="footer"></slot>
      </div>
    </el-drawer>
</template>

<script>
export default {
  name: 'index',
  props:{
    visible: {
      type:Boolean,
      default:false
    },
    title: {
      type: String,
      default: undefined
    },
    width: {
      type: String,
      default: '60%'
    }
  },
  computed: {
    show: {
      get(){
        return this.visible;
      },
      set(val){}
    }
  },
  methods:{
    handleClose(done) {
      this.$emit('update:visible',false)
      done()
    },
    reset(){

    },
    submit(){

    },
  }
}
</script>

<style scoped lang="scss">
 .drawer-enjoy{
   ::v-deep .el-scrollbar__wrap{
     height: 85vh;
   }
   ::v-deep .el-scrollbar__bar.is-vertical > div{
     display: none;
   }
  .drawer-footer{
    text-align: center;
    display: block;
    position: absolute;
    bottom:0;left:0;
    width:100%;
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    margin-bottom:0;
    padding:10px 0;
  }

  ::v-deep .el-drawer{
    overflow: visible;
    //position: relative;
    &:before{
      content:'';
      display: block;
      width: 20px;
      height:80px;
      background: url("../../assets/images/icons/tzimg.png") no-repeat;
      background-size: cover;
      position: absolute;left:-20px;top:45%;margin-top: -20px;
    }
  }
  .el-drawer__header > :first-child{
    flex: none;
  }
  ::v-deep .el-drawer__header{
    padding-top:10px;
    margin: 10px 20px;padding: 0;
    margin-bottom: 10px;display: block;border-bottom: 1px solid #EDEDF2;
    span{
      display: inline-block;
      padding: 0 0 8px;
      color: #333333;font-size: 14px;font-weight: 600;
      letter-spacing: 1px;
      position: relative;
    }
    span:after{
      width:100%;
      height:2px;
      content:'';
      display: block;
      clear: both;
      background: #0B7BE3 ;
      position: absolute;
      bottom: -1px;
    }
  }
  .drawer-body-enjoy{
    padding:0 20px;

  }
}


//.drawer-enjoy .el-drawer__title {
//
//}
//.drawer-enjoy .el-drawer {
//  position: relative;
//}
//::v-deep .el-drawer__header{
//  padding-top:10px;
//  margin-bottom: 10px;
//}
//.drawer-body-enjoy{
//  padding:0 20px;
//}
</style>
